<#include "/default/utils/ui.ftl"/>

<@layout>
<link rel="stylesheet" href="/static/scroll/css/style.css" media="screen" />
<script type="text/javascript" src="/static/scroll/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/static/scroll/js/blocksit.min.js"></script>

<div class="row streams">
    <#list channels as row>
        <div class="col-xs-12 col-md-3" style="margin-bottom:10px;">
            <a href="/channel/${row.id}" title="${row.name}">
                <img src="/static/default/images/${row.id}.jpg" class="img-responsive" alt="${row.name}">
            </a>
        </div>
    </#list>
    <div class="col-xs-1 col-md-1" style="text-align: center;"></div>
<#--<div class="col-xs-10 col-md-10" style="text-align: center;">-->
<#--<script type="text/javascript">var jd_union_unid="2714",jd_ad_ids="505:6",jd_union_pid="CPqchP/MLBCaFRoAIKq1rpkFKgA=";var jd_width=960;var jd_height=90;var jd_union_euid="";var p="AhAPURlcEgYVD2VEH0hfIlgRRgYlXVZaCCsfSlpMWGVEH0hfIlU%2BcwxIHHVVNU8HSVdUfC99J0BXSXdZF2sVABsOURxYFAQWN1YdWxAyIlgRRgYlSXwGZUQfSF8iB1EZWBAKFg9dGlkdBiIGZStr";</script><script type="text/javascript" charset="utf-8" src="//u-x.jd.com/static/js/auto.js"></script>-->
<#--</div>-->
    <div class="col-xs-1 col-md-1" style="text-align: center;"></div>
    <div class="col-xs-12 col-md-12 side-left" style="padding-top:10px;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <ul class="list-inline topic-filter">
                    <li data-toggle="tooltip" title="发布时间排序">
                        <a href="?order=newest" <#if order == 'newest'> class="active" </#if>>最近</a>
                    </li>
                    <li data-toggle="tooltip" title="点赞数排序">
                        <a href="?order=favors" <#if order == 'favors'> class="active" </#if>>投票</a>
                    </li>
                    <li data-toggle="tooltip" title="评论次数排序">
                        <a href="?order=hottest" <#if order == 'hottest'> class="active" </#if>>热门</a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>

            <@contents pn=pn order=order>
                <div id="wrapper">
                    <div id="container">
                        <#list results.content as row>
                            <div class="grid">
                                <#--src="http://pbl71lr73.bkt.clouddn.com/default.png?imageView2/1/w/175/h/175"-->
                                <div class="imgholder"><img class="lazy" data-original="http://pbl71lr73.bkt.clouddn.com/${(row.thumImage)!}?imageView2/1/w/175/h/175" width="175" /></div>
                                <strong>
                                    <a href="${base}/view/${row.id}">
                                    ${row.title}
                                    </a>
                                </strong>
                                <h6>
                                    阅读数:${row.views} | ${(row.lastUpadteTime?string('yyyy-MM-dd'))!}
                                </h6>
                                <p>${row.summary}</p>
                                <div class="meta" style="line-height:30px;">
                                    <a style="float:left" href="${base}/users/${row.author.id}">
                                        <img class="media-object img-thumbnail avatar avatar-middle" src="${base + row.author.avatar}" style="width:30px;height:30px;">
                                    </a>
                                    <a style="float:right;" href="${base}/view/${row.id}">点击查看>>></a>
                                </div>
                            </div>
                        </#list>
                    </div>
                </div>
                <div class="panel-footer text-right remove-padding-horizontal pager-footer">
                    <!-- Pager -->
                    <@pager request.requestURI!"", results, 5/>
                </div>
            </@contents>

        </div>
    </div>
<#--<div class="col-xs-12 col-md-3 side-right">-->
<#--<div class="col-xs-12 col-md-3">-->
<#--<#include "/default/inc/right.ftl" />-->
<#--</div>-->
</div>
<script>
    $("img.lazy").lazyload({
        load:function(){
            $('#container').BlocksIt({
                numOfCol:5,
                offsetX: 8,
                offsetY: 8
            });
        }
    });
    $(window).scroll(function(){
        // 当滚动到最底部以上50像素时， 加载新内容
        if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
            $('#container').append($("#test").html());
            $('#container').BlocksIt({
                numOfCol:5,
                offsetX: 8,
                offsetY: 8
            });
            $("img.lazy").lazyload();
        }
    });

    //window resize
    var currentWidth = 1100;
    $(window).resize(function() {
        var winWidth = $(window).width();
        var conWidth;
        if(winWidth < 660) {
            conWidth = 440;
            col = 2
        } else if(winWidth < 880) {
            conWidth = 660;
            col = 3
        } else if(winWidth < 1100) {
            conWidth = 880;
            col = 4;
        } else {
            conWidth = 1100;
            col = 5;
        }

        if(conWidth != currentWidth) {
            currentWidth = conWidth;
            $('#container').width(conWidth);
            $('#container').BlocksIt({
                numOfCol: col,
                offsetX: 8,
                offsetY: 8
            });
        }
    });
</script>
</@layout>